<template>
    <div class="foot-box">
        <router-link to='/'>
            <img v-if="nav==0" src="@/assets/images/nav-home-active.png">
            <img v-else src="@/assets/images/nav-home.png">
            <p :class="{active:nav==0}">首页</p>
        </router-link>
        <router-link to='/mine/poster'>
            <img v-if="nav==1" src="@/assets/images/nav-share-active.png">
            <img v-else src="@/assets/images/nav-share.png">
            <p :class="{active:nav==1}">分享</p>
        </router-link>
        <router-link to='/cart'>
            <img v-if="nav==2" src="@/assets/images/nav-cart-active.png">
            <img v-else src="@/assets/images/nav-cart.png">
            <span v-if="goodsNum > 0">
                <i v-if="goodsNum > 9"><img src="../../assets/images/icon-ellipsis.png" alt=""></i>
                <b v-else>{{goodsNum}}</b>
            </span>
            <p :class="{active:nav==2}">购物车</p>
        </router-link>
        <router-link to='/mine'>
            <img v-if="nav==3" src="@/assets/images/nav-mine-active.png">
            <img v-else src="@/assets/images/nav-mine.png">
            <p :class="{active:nav==3}">我的</p>
        </router-link>
    </div>
</template>

<script>
    export default {
        name: 'Navbar',
        props: {
            nav:{
                type:Number,
                required:true
            }
        },
        data() {
            return {
                goodsNum:10
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/css/public";
    .foot-box{
        position: fixed;
        left: 0;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        height: vw(98);
        width: 100%;
        padding: 0 vw(70);
        border-top: 1px solid #f5f5f5;
        text-align: center;
        font-size: vw(22);
        color: #262626;
        background-color: #fff;
        img{
            position: relative;
            z-index: 1;
            width: vw(46);
            margin: vw(6) auto;
        }
        a{
            position: relative;
            span{
                position: absolute;
                left: 60%;
                top: 0;
                z-index: 10;
                //transform: translate(-50%,0);
                display: flex;
                align-items: center;
                justify-content: center;
                width: vw(24);
                height: vw(24);
                font-size: vw(20);
                color: $green;
                b{
                    font-weight: normal;
                    border-radius: 50%;
                    background-color: #fff;
                    border: 1px solid $green;
                }
                img{
                    width: vw(24);
                    margin: 0;
                }
            }
            p.active{
                color:$green;
            }
        }
    }
</style>
